<template>
<f7-page>
    <f7-navbar title="选择车辆" back-link="返回">
        <f7-subnavbar>
            <f7-segmented raised>
                <f7-button :class="{'active':tabActive==='frend'}"   @click="changeTab('frend')">挂靠车辆</f7-button>
                <f7-button :class="{'active':tabActive==='platform'}" @click="changeTab('platform')">平台推荐</f7-button>
            </f7-segmented>
        </f7-subnavbar>
    </f7-navbar>

    <div class="driver_list" v-show="tabActive==='frend'">
        <div class="item-inner" >
            <li v-for="item,index in this.driverGroup">
                <div @click="groupClick(item,index)">
                    <f7-icon :f7="item.switch?'down':'right'" class="add"></f7-icon>
                    <h2 class="new_txt">{{item.name}}<span>({{item.count}})</span></h2>
                </div>
                <div class="item-inner"  v-for="grupDtl,key in driverGroupItem" v-show="item.switch && key==item._id">
                    <template v-for="dt in grupDtl">
                        <div class="list-company-checkbox">
                            <div class="company-checkbox">
                                <label  class="checkbox pull-left" @change="boxChange()"><input type="checkbox" v-model="dt.switch" :disabled="dt.is_select"><i class="icon-checkbox"></i></label>
                                <div class="item item-avatar item-car">
                                    <img :src="dt.truck_logo?dt.truck_logo:0" class="img-car" @error="imgError" data-type="truck_logo">
                                    <h3 class="text-purple ng-binding">
                                        {{dt.truck_num}}
                                        <img src="../../assets/img/pass-icon2.png" class="pass-icon">
                                        <span class="replace ng-binding">{{dt.newLogin?'上线':'未上线'}}</span>
                                    </h3>
                                    <h5 class="text-gray1 ng-binding" >载重{{dt.truck_weight}}吨</h5>
                                    <p v-if="dt.is_select">该车已被选</p>
                                    <div class="item-face text-center gap-10">
                                        <img class="img-circle" :src="dt.photo_url">
                                        <h6 class="text-gray ng-binding">{{dt.real_name}}</h6>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </template>
                </div>
            </li>
        </div>
    </div>
    <div class="driver_list" v-show="tabActive==='platform'">
        <div class="item-inner"  v-for="dt,key in driverPlatformItem" >
            <li>
                <div class="item-inner">
                    <div class="list-company-checkbox" >
                        <div class="list-company-checkbox">
                            <div class="companygetVerifyDriver-checkbox">
                                <label  class="checkbox pull-left" @change="boxChange()"><input type="checkbox" v-model="dt.switch"><i class="icon-checkbox"></i></label>
                                <div class="item item-avatar item-car">
                                    <img :src="dt.truck_logo?dt.truck_logo:0" class="img-car" @error="imgError" data-type="truck_logo">
                                    <h3 class="text-purple ng-binding">
                                        {{dt.truck_num}}
                                        <span class="replace ng-binding">{{dt.newLogin?'上线':'未上线'}}</span>
                                    </h3>
                                    <h5 class="text-gray1 ng-binding" >载重{{dt.truck_weight}}吨</h5>
                                    <div class="item-face text-center gap-10">
                                        <img class="img-circle" :src="dt.photo_url">
                                        <h6 class="text-gray ng-binding">{{dt.real_name}}</h6>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </li>
        </div>
        <div v-if="driverPlatformItem.length==0">
            暂无数据
        </div>
    </div>





    <f7-toolbar>
        <div class="row button-foot">
            <div class="col col-75">
                已选择：
                <span class="text-purple">{{frendIds.length}}辆挂靠车</span>,
                <span class="text-purple">{{platformIds.length}}辆平台车</span>
            </div>
            <div class="col col-25 text-align-center" @click="creatDraverDmd()">立即添加</div>
        </div>
    </f7-toolbar>
</f7-page>
</template>

<script>
    import utilsCommon from '../../utils/common'
    export default {
        name: "selectDriver",
        data(){return{
            otherInfor:{addsInfo:{}},
            tabActive:'frend',
            driverGroup:null,
            driverGroupItem:{},
            driverPlatformItem:[],
            frendIds:[],
            platformIds:[],
            changeList:{
                demand_id:'',
                platform_driver:[],
                user_ids:[]
            }

        }},
        methods:{
            changeTab(type){
                this.tabActive=type;
            },
            async getGroup(){
                this.otherInfor.addsInfo.verify=true
                this.driverGroup = (await this.mineService.getListGroup({type: "DRIVER"})).data.data;

                let param={
                    demand_id:this.$f7Route.params.demandId,
                    verify:true,
                    // group_id:this.otherInfor.addsInfo.group_id,
                    scene:'continue',
                    page:1
                }
                let drivers = (await this.LineService.getContinueDr(param)).data.data;
                console.log(drivers)
                this.driverGroup.unshift({
                    count:drivers.length,
                    name:"全部司机",
                    _id:"weifenzusiji"
                })
                utilsCommon.addAttrSwitch(this.driverGroup)

            },
            async getPlatformDriver(){
                this.otherInfor.addsInfo.verify=false
                let param={
                    demand_id:this.$f7Route.params.demandId,
                    verify:false,
                    // group_id:this.otherInfor.addsInfo.group_id,
                    scene:'continue',
                    page:1
                }
                this.driverPlatformItem = (await this.LineService.getContinueDr(param)).data.data;
                utilsCommon.addAttrSwitch(this.driverPlatformItem)

            },
            //组点击事件
            groupClick(item,index){
                item.switch=!item.switch
                this.$set(this.driverGroup,index,item)


                //数据懒加载
                if(item.switch){
                    let temp=true;
                    for(let k in this.driverGroupItem){
                        if(k==item._id){
                            temp=false
                        }
                    }
                    if(temp){
                        this.getGroupDtl(item._id)
                    }
                }

            },
            async getGroupDtl(groupid){
                let drivers;
                if(groupid=='weifenzusiji'){
                    this.otherInfor.addsInfo.verify=true
                    this.otherInfor.addsInfo.group_id='';
                    let param={
                        demand_id:this.$f7Route.params.demandId,
                        verify:this.otherInfor.addsInfo.verify,
                        // group_id:this.otherInfor.addsInfo.group_id,
                        scene:'continue',
                        page:1
                    }
                    drivers = (await this.LineService.getContinueDr(param)).data.data;
                }else{
                    this.otherInfor.addsInfo.verify=true;
                    this.otherInfor.addsInfo.group_id=groupid;
                    let param={
                        demand_id:this.$f7Route.params.demandId,
                        verify:this.otherInfor.addsInfo.verify,
                        group_id:this.otherInfor.addsInfo.group_id,
                        scene:'continue',
                        page:1
                    }
                    drivers = (await this.LineService.getContinueDr(param)).data.data;

                }
                utilsCommon.addAttrSwitch(drivers)
                this.$set(this.driverGroupItem,groupid,drivers)
            },
            boxChange(){
                this.frendIds=[]
                this.platformIds=[]
                for(let k in this.driverGroupItem){
                    this.driverGroupItem[k].forEach( (item)=> {
                        if(item.switch){
                            this.frendIds.push(item._id)
                        }

                    })
                }
                this.driverPlatformItem.forEach( (item)=> {
                    if(item.switch){
                        this.platformIds.push(item._id)
                    }

                })

            },
            async creatDraverDmd(){
                let param = {
                    demand_id: this.$f7Route.params.demandId,
                    platform_driver:[],
                    user_ids:this.frendIds
                }
                this.changeList = (await this.LineService.transAssignList(param)).data.data
                this.goBack({ force: true, ignoreCache: true })
            }

        },
        created(){
            this.otherInfor.addsInfo.page=1;
            this.getGroup()
            this.getPlatformDriver();
        }
    }
</script>

<style scoped>
    .button-foot{
        width: 100%;
        font-size: 14px;
    }
    .button-foot .col-75{
        padding-left: 15px;
        width: 70% !important;
        line-height: 44px;
    }
    .ios .row .col-25 {
        width: 30% !important;
    }
    .button-foot .col:last-child {
        text-align: center;
        background: #9898e7;
        color: #fff;
        line-height: 44px;
    }


    li{list-style-type:none;}
    .ios .page {
        background: #fff;
    }
    .ios a {
        color: #333;
        display: inline-block;
        width: 100%;
    }
    .ios .button {
        border: none;
        border-left-width: 0 !important;
        font-size: 14px;
        font-weight: normal;
    }
    .active {
        color: #000 !important;
        font-weight: bold !important;
    }
    .ios .subnavbar {
        margin-bottom: 30px;
        border-color: #f5f5f5;
    }
    .ios .color-theme-white .button {
        color: #777;
    }
    .row_nav {
        position: relative;
        background: #f5f5f5;
        border-bottom: 1px solid #f5f5f5;
        padding: 10px;
        height: 35px;
    }

    .ios .row .col-80 {
        background: #fff;
        border-radius: 4px;
        height: 34px;
    }

    .search {
        background: #fff;
        color: #999 !important;
        border-color: #fff !important;
        font-size: 12px;
        height: 34px !important;
        line-height: 34px !important;
    }

    .search_img {
        position: absolute;
        font-size: 16px;
        color: #999;
        top: 19px;
        left: 20px;
    }

    .Please_enter {
        margin-left: 30px;
        width: 80%;
        height: 34px;
    }
    .new_txt {
        margin: 0px;
        font-weight: inherit;
        display: inline-block;
        font-size: 16px;
        margin-left: 10px;
        color: #000;
    }

    .new_txt span {
        margin-left: 5px;
    }
    .add {
        font-size: 22px;
    }
    .item-inner {
        padding: 10px 10px 10px 15px;
    }
    /* 名片 */
    .list-inset {
        background: transparent;
        margin: 0 15px;
    }
    .text-left {
        position: relative;
    }

    .line-icon {
        position: absolute;
        left: -2px;
        width: 16px;
        height: 45px;
        top:0px;
    }
    .The_of{
        text-align: center;
    }
    .pulll-left {
        text-align: left;
        margin-left: 20px;
    }

    .pull-right {
        text-align: right;
    }

    .pulll-left span {
        font-size: 12px;
        color: #666;
        display: block;
    }

    .pulll-left b {
        font-size: 14px;
        color: #000;
        display: block;
    }

    .pull-right span {
        font-size: 12px;
        color: #666;
        display: block;
    }

    .pull-right b {
        font-size: 14px;
        color: #000;
        display: block;
    }

    .text-center_article {
        font-size: 14px;
        color: #333;
        margin-top: -5px;
    }

    .text-right span {
        margin: 0 0 3px 0;
        font-size: 10px;
        color: #666;
    }
    .row_ll{
        padding:5px;
    }
    .gap-row {
        padding: 10px 0;
    }
    .Future_generations{
        float: left;
    }
    .pulll-left {
        float: left;
    }
    .generations {
        font-size: 16px;
        color: #333;
        margin-left:28px;
    }
    .company-checkbox {
        position: relative;
        padding-left: 15px;
        border-bottom: 1px solid #f5f5f5;
        padding-bottom: 1px;
    }
    .company-checkbox .checkbox {
        top:24px;
        position: absolute;
        left: 0px;
        z-index: 3;
    }
    .item-car {
        border: none;
        min-height: 64px;
        font-size: 14px;
        color: #444;
        position: relative;
        z-index: 2;
        margin: -1px;
        padding: 16px;
        padding-left: 65px;
    }
    .item-car.item-avatar .img-car {
        left: 20px;
        border-radius: 3px;
        width: 38px;
        height: 28px;
        top: 25px;
        position: absolute;
    }
    .item h3 {
        margin: 0 0 4px 0;
        font-size: 14px;
    }
    .text-purple {
        color: #A2A2F0;
    }
    .pass-icon {
        width: 30px;
        height: 17px;
        vertical-align: text-bottom;
        margin: 0px 4px;
    }
    .replace {
        font-size: 10px;
        color: #8d8d8d;
        text-align: center;
        display: inline-block;
        border: 1px solid #d8d8d8;
        border-radius: 4px;
        padding: 0 4px;
    }
    .text-gray1 {
        color: #666;
    }
    .text-gray{
        color: #999;
    }
    .item h5, .item h6 {
        margin: 0 0 3px 0;
        font-size: 10px;
    }
    .item-face {
        position: absolute;
        right: 15px;
        top: 8px;
    }
    .img-circle {
        width: 24px;
        height: 24px;
        border-radius: 100%;
        background: #f0f0f0;
    }
    .list-company-checkbox{
        margin-left: 10px;
    }

</style>
